<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>

</head>

<body>
<div th:replace="common/top">

</div>
<div id="Catalog">
    <br>
    <br>
    <br>
    <form th:action = "@{/order/comfirm}" th:object="${order}" method="post">
        <script type="text/javascript" src="../js/index.js"> </script>

        <!--  标题进度条 start-->
        <div class="content" style="margin: 2% 30%;width: 100%;">
            <div class="processBar">
                <div id="line0" class="bar">
                    <div id="point0" class="c-step c-select"></div>
                </div>
                <div class="text" style="margin: 10px -25px;"><span class='poetry'>Payment Details</span></div>
            </div>
            <div class="processBar">
                <div id="line1" class="bar">
                    <div id="point1" class="c-step"></div>
                </div>
                <div class="text" style="margin: 10px -30px;"><span class='poetry'>Billing Address</span></div>
            </div>
            <div class="processBar">
                <div id="line2" class="bar" style="width: 0;">
                    <div id="point2" class="c-step"></div>
                </div>
                <div class="text" style="margin: 10px -30px;"><span class='poetry'>Shipping Address</span></div>
            </div>
        </div>
        <!--  标题进度条 end-->
        <div style="clear: both;"></div>
        <div id="MainContent" style="margin: 2% 30%;">
            <div class="content" id="basicInfo">
                <table>
                    <tr>
                        <th colspan=2>Payment Details</th>
                    </tr>
                    <tr>
                        <td>Card Type:</td>
                        <td><select name="cardType">
                            <option selected="selected" value="Visa">Visa</option>
                            <option value="MasterCard">MasterCard</option>
                            <option value="American Express">American Express</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>Card Number:</td>
                        <td><input type = "text" name = "creditCard" th:field="*{creditCard}"/>* A fake
                            number!</td>
                    </tr>
                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td><input type = "text" name = "expiryDate"th:field="*{expiryDate}"/></td>
                    </tr>
                </table>
            </div>
            <div class="content" id="education">
                <table>
                    <tr>
                        <th colspan=2>Billing Address</th>
                    </tr>
                    <tr>
                        <td>First name:</td>
                        <td><input type = "text" name = "billToFirstName" th:value="${session.account.firstName}" th:field="*{billToFirstName}"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type = "text" name = "billToLastName" th:value="${session.account.lastName}" th:field="*{billToLastName}"/></td>

                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type = "text" name = "billAddress1" th:value="${session.account.address1}" th:field="*{billAddress1}"/></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type = "text" name = "billAddress2" th:value="${session.account.address2}" th:field="*{billAddress2}"/></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type = "text" name = "billCity" th:value="${session.account.city}" th:field="*{billCity}"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type = "text" name = "billState" th:value="${session.account.state}" th:field="*{billState}"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type = "text" name = "billZip" th:value="${session.account.zip}" th:field="*{billZip}"/></td>

                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type = "text" name = "billCountry" th:value="${session.account.country}" th:field="*{billCountry}"/></td>

                    </tr>
                </table>
            </div>
            <div class="content" id="work">
                <table>
                    <tr>
                        <th colspan=2>Shipping Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td><input type = "text" name = "shipToFirstName" th:value="${session.account.firstName}" th:field="*{shipToFirstName}"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type = "text" name = "shipToLastName" th:value="${session.account.lastName}" th:field="*{shipToLastName}"/></td>

                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type = "text" name = "shipAddress1" th:value="${session.account.address1}" th:field="*{shipAddress1}"/></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type = "text" name = "shipAddress2" th:value="${session.account.address2}" th:field="*{shipAddress2}"/></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type = "text" name = "shipCity" th:value="${session.account.city}" th:field="*{shipCity}"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type = "text" name = "shipState" th:value="${session.account.state}" th:field="*{shipState}"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type = "text" name = "shipZip" th:value="${session.account.zip}" th:field="*{shipZip}"/></td>

                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type = "text" name = "shipCountry" th:value="${session.account.country}" th:field="*{shipCountry}"/></td>

                    </tr>



                </table>
            </div>

        </div>
        <div style="clear: both;"></div>
        <div style="text-align: center;">
            <button  type="button" id="previous_step" style="width:100px;height:60px">back</button>
            <button type="button" id="next_step" style="width:100px;height:60px">next</button>
            <button id="finish" style="width:120px;height:60px">FINISH</button>
        </div>

    </form></div>
<div th:replace="common/bottom"></div>

</body>
</html>